<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useAppStore } from '@/stores/app'
import { MOBILE_ADMIN_MENU_ITEMS, MOBILE_PARTNER_MENU_ITEMS } from '@/constants/MENU_ITEMS'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Moon,
  Sunny,
  SwitchButton,
  Setting,
  ArrowRight,
  UserFilled
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()
const appStore = useAppStore()

// 根据用户角色返回对应的菜单
const menuGroups = computed(() => {
  return authStore.isPartner ? MOBILE_PARTNER_MENU_ITEMS : MOBILE_ADMIN_MENU_ITEMS
})

// 暗黑模式状态
const isDark = computed(() => appStore.dark)

// 处理菜单点击
function handleMenuClick(path: string) {
  router.push(path)
}

// 切换暗黑模式
function toggleDark() {
  appStore.toggleDark()
  ElMessage.success(isDark.value ? '다크 모드 활성화' : '라이트 모드 활성화')
}

// 处理退出登录
async function handleLogout() {
  try {
    await ElMessageBox.confirm('로그아웃 하시겠습니까?', '확인', {
      confirmButtonText: '확인',
      cancelButtonText: '취소',
      type: 'warning',
    })
    
    await authStore.logout()
    ElMessage.success('로그아웃 되었습니다')
    router.push('/login')
  } catch (error) {
    // 用户取消
  }
}
</script>

<template>
  <div class="more-container">
    <!-- 用户信息卡片 -->
    <div class="user-section mobile-padding">
      <div class="mobile-card user-card">
        <div class="user-info">
          <el-avatar :size="60" :icon="UserFilled" />
          <div class="user-details">
            <div class="user-name">{{ authStore.user.name || '관리자' }}</div>
            <div class="user-role">{{ authStore.isAdmin ? '관리자' : '파트너' }}</div>
            <div class="user-id">{{ authStore.user.loginId }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速设置 -->
    <div class="settings-section mobile-padding">
      <div class="mobile-card">
        <div class="mobile-card-title">설정</div>
        
        <div class="settings-list">
          <div class="setting-item" @click="toggleDark">
            <div class="setting-content">
              <el-icon class="setting-icon">
                <Moon v-if="!isDark" />
                <Sunny v-else />
              </el-icon>
              <span class="setting-label">
                {{ isDark ? '라이트 모드' : '다크 모드' }}
              </span>
            </div>
            <el-switch
              :model-value="isDark"
              @change="toggleDark"
              @click.stop
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 所有菜单 -->
    <div class="menu-section mobile-padding">
      <div v-for="group in menuGroups" :key="group.group" class="menu-group">
        <div class="mobile-card">
          <div class="mobile-card-title">{{ group.group }}</div>
          
          <div class="mobile-list">
            <div
              v-for="item in group.items"
              :key="item.path"
              class="mobile-list-item touch-feedback"
              @click="handleMenuClick(item.path)"
            >
              <el-icon class="mobile-list-item-icon">
                <component :is="item.icon" />
              </el-icon>
              <div class="mobile-list-item-content">
                <div class="mobile-list-item-title">{{ item.label }}</div>
              </div>
              <el-icon class="mobile-list-item-arrow">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 退出登录 -->
    <div class="logout-section mobile-padding">
      <div class="mobile-card">
        <div
          class="logout-item touch-feedback"
          @click="handleLogout"
        >
          <el-icon class="logout-icon">
            <SwitchButton />
          </el-icon>
          <span class="logout-label">로그아웃</span>
        </div>
      </div>
    </div>

    <!-- 版本信息 -->
    <div class="version-section mobile-padding">
      <div class="version-info">
        <div class="version-text">관리자 모바일 v1.0.0</div>
        <div class="copyright">© 2024 All rights reserved</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.more-container {
  min-height: 100%;
  background-color: var(--el-bg-color-page);
  padding-bottom: 20px;
}

.user-card {
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.user-role {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 2px;
}

.user-id {
  font-size: 12px;
  opacity: 0.7;
}

.settings-list {
  display: flex;
  flex-direction: column;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
}

.setting-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.setting-label {
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.menu-group {
  margin-bottom: 16px;
}

.logout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  color: var(--el-color-danger);
}

.logout-icon {
  font-size: 18px;
}

.logout-label {
  font-size: 16px;
  font-weight: 500;
}

.version-section {
  margin-top: 20px;
}

.version-info {
  text-align: center;
  color: var(--el-text-color-placeholder);
}

.version-text {
  font-size: 12px;
  margin-bottom: 4px;
}

.copyright {
  font-size: 10px;
}
</style>
